<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax使用</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
    <div id="app">

    </div>
    <!-- <script>
        // let aap = document.getElementById('app')
        // let aap = $('#app')
        $.ajax({
            url:'https://autumnfish.cn/search',
            method:'Get',
            data: {
                keywords:'海阔天空'
            },
            dataType:'json',
            success: (res) => {
                console.log(res);
                showList(res.result.songs)
            }
        })//发送接口请求
        function showList(songList) {
            let ol = document.createElement('ul')
               for (let i = 0;i < songList.length;i++) {
                   //创建ol标签
                   let li = document.createElement('li')
                   li.innerHTML = songList[i].name + '-------' + songList[i].artists[0].name;
                //    li.innerHTML = `${songList[i].name} ------- ${songList[i].artists[0].name}`;
                   
                   ol.appendChild(li);
               }
               app.appendChild(ol)
        }
    </script> -->
    //原生接口
    <script>
        var myAjax =new XMLHttpRequest()
        //设置请求的uml，参数，这是准备工作
        myAjax.open('get','https://autumnfish.cn/search?keywords="海阔天空"')
        //发送请求
        myAjax.send()
        //设置请求的uml，参数，这是准备工作
        myAjax.open('get','https://autumnfish.cn/search')
        //post一定要设置请求头
        myAjax.setRequestHeader()
        //发送请求
        myAjax.send('keywords="海阔天空"')
        //状态变更
        myAjax.onreadystatechange = function () {
            if (myAjax.readyState == 4 && myAjax.status == 200) {
                console.log(JSON.parse(myAjax.responseText));
            }
        }
    </script>
    <!-- <script>
        //手写原生接口
        function request (method,url,data,success) {
            var ajax = new XMLHttpRequest()
            if (method.toLowerCase() == 'get') {
                if (data) {
                    url += '?'
                    url += data
                }else {

                }
                ajax.open(method,url)
                ajax.send()
            }else {
                //post一定要设置请求头
            }
            
            ajax.onreadystatechange = function () {
            if (ajax.readyState == 4 && ajax.status == 200) {
                success(ajax.responseText)
            }
        }
        }

        
        request('get','https://autumnfish.cn/search' , 'keywords="海阔天空"',success) 
            function success (res) {
                console.log(JSON.parse(res) );
            }
        
    </script> -->
</body>
</html>
